<template>
  <view>
    <view class="container">
      <uni-forms ref="form" :modelValue="formData" labelWidth="200px" labelPosition="top" :rules="rules">
        <cu-cell-group class="background-white bor-top">
          <uni-forms-item name="visitorName">
            <cu-cell title="姓名" required>
              <input
                type="text"
                v-model="formData.visitorName"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="10"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="sex">
            <cu-cell title="性别" required>
              <CuRadioGroup v-model="formData.sex" :list="sexList" />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="photo">
            <cu-cell title="照片" required column>
              <image-upload :imageUrl="formData.photo" state="edit" :limit="1" @change="imageOnChange"></image-upload>
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="idCard">
            <cu-cell title="身份证" required>
              <input
                type="text"
                v-model="formData.idCard"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="18"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="phone">
            <cu-cell title="电话">
              <input
                type="text"
                v-model="formData.phone"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="visitStartTime">
            <cu-cell
              title="拜访开始时间"
              link
              placeholder="选择时间"
              :description="formData.visitStartTime"
              @click="showStartTimePicker()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="visitEndTime">
            <cu-cell
              title="拜访离开时间"
              link
              placeholder="选择时间"
              :description="formData.visitEndTime"
              @click="showEndTimePicker()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="deptId">
            <cu-cell
              title="拜访部门"
              link
              placeholder="请选择部门"
              :description="formData.deptName"
              @click="showDeptPicker()"
            ></cu-cell>
          </uni-forms-item>
        </cu-cell-group>

        <view class="background-white bor-top">
          <uni-forms-item name="reason" label="事由" class="label-top">
            <textarea v-model="formData.reason" class="text-area" placeholder="请输入" maxlength="200" />
          </uni-forms-item>
        </view>
      </uni-forms>
    </view>
    <CuDateTimePicker ref="startTimePicker" @change="handleStartTimeClick" />
    <CuDateTimePicker ref="endTimePicker" @change="handleEndTimeClick" />
    <dept-selector ref="deptSelectorRef" @change="deptSelectorChange"></dept-selector>

    <view class="submit-group">
      <button class="u-button" :loading="loading" type="primary" :ripple="true" @click="submit">提交</button>
    </view>
  </view>
</template>
<script>
import { reqVisitorManageAdd } from '@/api/visitor-regist'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuRadioGroup from '@/components/cu-radio-group/cu-radio-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import DictPicker from '@/components/dict-picker/index.vue'
import DeptSelector from '@/components/dept-selector/index'
import CuDateTimePicker from '@/components/cu-date-time-picker/cu-date-time-picker.vue'
import ImageUpload from '@/components/image-upload/index.vue'

export default {
  name: 'VisitorRegistForm',
  components: {
    CuCellGroup,
    CuCell,
    DictPicker,
    DeptSelector,
    CuRadioGroup,
    ImageUpload,
    CuDateTimePicker
  },
  data() {
    const validatorPhone = (rule, value, data, callback) => {
      const phoneReg = /^1[3456789]\d{9}$/
      if (phoneReg.test(value)) {
        return true
      } else {
        return callback('请输入正确的电话号码')
      }
    }
    return {
      formData: {
        visitorName: '',
        sex: '',
        photo: '',
        idCard: '',
        phone: '',
        visitStartTime: '',
        visitEndTime: '',
        deptId: '',
        deptName: '',
        reason: ''
      },
      loading: false,
      show: false,
      rules: {
        visitorName: {
          rules: [
            {
              required: true,
              errorMessage: '姓名不能为空'
            }
          ]
        },
        sex: {
          rules: [
            {
              required: true,
              errorMessage: '性别不能为空'
            }
          ]
        },
        photo: {
          rules: [
            {
              required: true,
              errorMessage: '照片不能为空'
            }
          ]
        },
        idCard: {
          rules: [
            {
              required: true,
              errorMessage: '身份证不能为空'
            }
          ]
        },
        phone: {
          rules: [
            {
              validateFunction: validatorPhone
            }
          ]
        }
      },
      sexList: [
        {
          value: 0,
          label: '男'
        },
        {
          value: 1,
          label: '女'
        }
      ]
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    showDeptPicker() {
      this.$refs.deptSelectorRef.open()
    },
    showStartTimePicker() {
      this.$refs.startTimePicker.show()
    },
    showEndTimePicker() {
      this.$refs.endTimePicker.show()
    },
    handleStartTimeClick(value) {
      this.formData.visitStartTime = value
    },
    handleEndTimeClick(value) {
      this.formData.visitEndTime = value
    },
    deptSelectorChange(item) {
      this.formData.deptId = item.value
      this.formData.deptName = item.name
    },
    imageOnChange(urlList) {
      this.formData.photo = urlList.join(',')
    },
    submit() {
      this.$refs.form.validate().then(() => {
        this.$modal.confirm('确定提交吗？').then(async () => {
          console.log('this.formData', this.formData)
          this.loading = true
          const params = {
            ...this.formData,
            visitStartTime: this.formData.visitStartTime ? `${this.formData.visitStartTime}:00` : '',
            visitEndTime: this.formData.visitEndTime ? `${this.formData.visitEndTime}:00` : ''
          }
          await reqVisitorManageAdd(params)
          this.loading = false
          uni.navigateBack()
          this.$modal.showToast('新增成功')
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx 120rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }
  }
}

.submit-group {
  background: #fff;
  z-index: 9;
  padding: 10px 20px;
}

.u-button {
  width: 800rpx;
  margin: 0 5px;
}
</style>
